<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>杂质分析工具</title>
		<link charset="utf-8" rel="stylesheet" href="__PUBLIC__/static/asset/bootstrap/3.3.6/css/bootstrap.min.css">
		
        <style>
        	.no-padding-right{
        		padding-right : 0!important;
        	}
        	.no-padding-left{
        		padding-left: 0!important;
        	}
            .jumbotron{
            	padding-top: 15px !important;
            	padding-bottom: 15px !important;
            }
            .memo{
                color: #aaa;
            }
        </style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="jumbotron">
					<h4><a href="{:config('base')}/index.php"><i class="glyphicon glyphicon-home"></i></a> 杂质分析工具
                        <a href="#" title="软件使用说明" data-toggle="modal" data-target="#help-modal"><i class="glyphicon glyphicon-question-sign"></i></a>
                    </h4>
                    <form id="form-data" action="{:url('result_peptide_impurity')}" method="post" class="form-horizontal" onsubmit="return false;">
                        <div class="form-group">
                            <div class="col-md-10 col-sm-10 col-xs-10 no-padding-left no-padding-right">
                                <div class="input-group">
                                    <span class="input-group-addon">N端</span>
                                    <input type="text" name="amino" class="form-control" id="amino" title="序列">
                                    <span class="input-group-addon">C端</span>
                                </div>
                                <input type="hidden" name="debug" value="{$debug}">
                            </div>
                            <div class="col-md-1  col-sm-2 col-xs-12">
                                <button id="calculate-button" type="button" class="calculate-button btn btn-primary pull-right" data-form="form-antisense"> 计算 </button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label no-padding-right">二硫键修饰&nbsp;</label>
                            <div class="col-md-4">
                                <input class="form-control" type="text" id="s2" name="s2" placeholder="格式：3-8,5-16">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label no-padding-right">固相树脂载体类型 </label>
                            <div class="col-md-2">
                                <select id="carrier-type" name="carrier_type" class="form-control" title="固相树脂载体类型">
                                    <option value="0">请选择</option>
                                    <option value="1">Wang resin</option>
                                    <option value="2">CTC resin</option>
                                    <option value="3">MBHA resin</option>
                                    <option value="4">AM resin</option>
                                </select>
                            </div>
                            <label class="col-md-2 control-label no-padding-right">合成方法 </label>
                            <div class="col-md-2 radio">
                                <label>
                                    <input type="radio" value="0" name="synthetic_method"> Boc方法
                                </label>
                                <label>
                                    <input type="radio" value="1" name="synthetic_method" checked> Fmoc方法
                                </label>
                            </div>
                            <label class="col-md-2 control-label no-padding-right">质谱 </label>
                            <div class="col-md-2 radio">
                                <label>
                                    <input type="radio" value="0.3" name="n"> 高分辨率
                                </label>
                                <label>
                                    <input type="radio" value="1" name="n" checked> 低分辨率
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-2 control-label no-padding-right">杂质分子量</label>
                            <div class="col-md-2 radio">
                                <input type="text" id="impurity-weight" name="impurity_weight" class="form-control" placeholder="可输入多个，以逗号分隔">
                            </div>
                            <label class="col-md-2 control-label no-padding-right">是否有醋酸酐封端操作</label>
                            <div class="col-md-2 radio">
                                <label>
                                    <input type="radio" value="1" name="has_operate"> 是
                                </label>
                                <label>
                                    <input type="radio" value="0" name="has_operate" checked> 否
                                </label>
                            </div>

                            <label class="col-md-2 control-label no-padding-right hidden" id="operate-label">封端位置</label>
                            <div class="col-md-2 hidden" id="operate-location">
                                <input type="text" class="form-control" name="operate_location" title="封端位置">
                            </div>
                        </div>
                    </form>

				  <div id="message-show" class="alert alert-danger hidden" role="alert">警告内容</div>
				</div>
				<!--
                	/.col-md-12
                -->
			</div>
			<!-- /.row -->
			
			<div class="row">
				<div id="result-show" class="col-md-12 hidden">
					<div class="body" id="result-body"></div>
				</div>
			</div>
		</div>

        <div class="modal fade" id="help-modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">杂质分析软件说明</h4>
                    </div>
                    <div class="modal-body">
                        <div>
                            1.本软件仅用于线性肽和普通修饰序列杂质分析。<br>
                            2.使用时，需要输入多肽序列、固相树脂载体类型、合成方法、是否醋酸酐封端等信息。<br>
                            3.如果采用封端操作，需要输入连接哪个氨基酸时采用的封端操作。比如序列
                              Ala<sup>1</sup>-Cys<sup>2</sup>-Asp<sup>3</sup>-Glu<sup>4</sup>-Phe<sup>5</sup>-Gly<sup>6</sup>-His<sup>7</sup>-Ile<sup>8</sup>-Lys<sup>9</sup>-Leu<sup>10</sup>-Met<sup>11</sup>-Asn<sup>12</sup>,
                            连接Asp时进行了封端，需要输入3。如果有多个位置，用 ，隔开。<br>
                            4.对于含有侧链的序列，默认先连接完主链再连接侧链，且对侧链不进行封端杂质分析。<br>
                            5.再输入目标杂质的平均分子量（可输入多个分子量），并选择用于检测MS的仪器是高分辨率质谱还是低分辨率质谱，软件自动分析杂质形成原因。<br>
                            6.选择高分辨率质谱，软件计算的MS误差范围更小，结果更加精确。<br>
                            7.对于分析出的杂质，研发人员需要再次确认杂质形成的可能性。<br>
                            8.如果软件计算出有多种形成杂质的原因，需要研发人员根据实际情况进行再次判断。
                        </div>
                        <hr>
                        <div>
                            <b>本软件分析的杂质类型</b><br>
                            1.氨基酸缺失杂质或重复连接杂质。<br>
                            2.乙酸酐封端杂质。<br>
                            3.常规氨基酸使用错误造成的杂质。<br>
                            4.副反应引起的杂质。
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->


		<script type="text/html" id="result_template">
            <div class="col-md-12">
                序列信息：{{d.location_info}}
            </div>
            {{# if(d.has_weight_result){}}
            <div class="col-md-12" style="margin-bottom: 5px;">
            {{d.weights_message}}
            </div>
            {{# } }}
            {{# for(var index=0, impurity_results=d.impurity_results, len=impurity_results.length; index < len; index++ ){ }}
			<div class="col-md-12">
                分子量{{impurity_results[index]['key']}}的杂质类型
                {{# if(impurity_results[index]['has_result']){ }}
                可能为：
				<table class="table table-bordered">
                    <thead>
                    <tr>
                        <th style="width: 20%">杂质类型</th>
                        <th>输出结果</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>双倍体杂质</td>
                        <td>{{impurity_results[index]['detail'][0]['content']||''}}</td>
                    </tr>
                    <tr>
                        <td>缺失或重复连接杂质</td>
                        <td>{{impurity_results[index]['detail'][1]['content']||''}}</td>
                    </tr>
                    <tr>
                        <td>封端杂质</td>
                        <td>{{impurity_results[index]['detail'][2]['content']||''}}</td>
                    </tr>
                    <tr>
                        <td>封端且缺失或重复连接的杂质</td>
                        <td>{{impurity_results[index]['detail'][3]['content']||''}}</td>
                    </tr>
                    <tr>
                        <td>副反应杂质</td>
                        <td>{{impurity_results[index]['detail'][4]['content']||''}}</td>
                    </tr>
                    <tr>
                        <td>氨基酸使用错误杂质</td>
                        <td>{{impurity_results[index]['detail'][5]['content']||''}}</td>
                    </tr>
                    </tbody>
                </table>
                {{# }else{ }}
                   <span style="color:red">未知</span>
                {{# } }}
			</div>
            {{# }  }}
		</script>

		<script src="__PUBLIC__/static/sea.js"></script>
		<script src="__PUBLIC__/static/skin/default/config.js"></script>
		
		<script>
			seajs.use('skin/default/peptide_impurity', function(tool){
                tool.initCalculate();
			})
		</script>
	</body>
</html>
